<template>
  <div class="templatebox">
    <baleTable
      :tableData="tableData"
      :tableHead="tableHead"
      :isSearch="true"
      :isTableRowClick="true"
      :tableLoading="tableLoading"
       :isExport="true"
      :page="page"
      @pageSizeChange="pageSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @searchMethods="searchMethods"
      @handleTableSearch="handleTableSearch"
      @tableSortChange="tableSortChange"
      @handleRowClick="handleRowClick"
      ref="baleTable"
    >
      <template #headLeft> </template>
      <template #user_id="{ scope }">
        <span>{{ scope.row.user.name }}</span>
      </template>
         <template #phone="{ scope }">
        <span>{{ scope.row.user.phone }}</span>
      </template>
       <template #department="{ scope }">
        <span>{{ scope.row.user.department }}</span>
      </template>
      <template #caoz="{ scope }">
        <el-button
          type="primary"
          :disabled="scope.row.approval_status != 0"
          @click.stop="ApprovalStatus(1, scope.row.id)"
          >采纳</el-button
        >
        <el-button
          type="warning"
          :disabled="scope.row.approval_status != 0"
          @click.stop="ApprovalStatus(2, scope.row.id)"
          >不采纳</el-button
        >
      </template>
      <!-- 审核状态 0:待审核，1:通过，2:未通过， -->
      <template #approval_status="{ scope }">
        <span
          :class="
            scope.row.approval_status == 0
              ? 'orange'
              : '' || scope.row.approval_status == 1
              ? 'success'
              : '' || scope.row.approval_status == 2
              ? 'warnning'
              : ''
          "
          >{{
            scope.row.approval_status == 0
              ? "待审核"
              : "" || scope.row.approval_status == 1
              ? "已采纳"
              : "" || scope.row.approval_status == 2
              ? "未采纳"
              : ""
          }}</span
        >
      </template>
      <template #first_pic="{ scope }">
        <div @click.stop v-if="scope.row.first_pic">
          <tablePrImg
            :isNeedBaseUrl="true"
            :imgSrc="`${
              scope.row.first_pic && scope.row.first_pic.split('&')[0]
            }`"
            :prImgList="
              scope.row.first_pic ? scope.row.first_pic.split('&') : []
            "
          ></tablePrImg>
        </div>
      </template>
    </baleTable>
    <!-- 退回操作弹窗 -->
    <approvalStatusDialog ref="ApprovalStatusDialog" @refresh="refresh" />
    <sceneRecordInfoDialog ref="sceneRecordInfoDialog" />
  </div>
</template>

<script>
import { tableHead } from "./config";
import { sceneRecordList, getuserListApi } from "@a/user";
import baleTable from "@c/baleTable.vue";
import tablePrImg from "@c/table-prImg.vue";
// import tableFile from "@c/table-file.vue";
import approvalStatusDialog from "./components/ApprovalStatus-dialog.vue";
import sceneRecordInfoDialog from "./components/sceneRecordInfo-dialog.vue";
export default {
  components: {
    baleTable,
    tablePrImg,
    approvalStatusDialog,
    sceneRecordInfoDialog,
    // tableFile,
  },
  data() {
    return {
      tableHead,
      tableData: [],
      page: {
        page: 1,
        size: 25,
        total: 0,
      },
      tableLoading: false,
      searchParams: {},
      sortParams: {},
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    handleTableSearch(val) {
      let user = this.tableHead.findIndex((v) => {
        return v.label == "发起人";
      });
      if (user != -1 && !this.tableHead[user].searchOptions.length) {
        this.getuserData(user);
      }
    },
    getuserData(user) {
      getuserListApi().then((res) => {
        if (res.code == 200) {
          console.log(res);
          let data = res.data.map((v) => {
            return {
              label: v.name,
              value: v.id,
            };
          });
          this.tableHead[user].searchOptions = data;
        }
      });
    },
    refresh() {
      this.getTableData();
    },
    //审核
    ApprovalStatus(type, id) {
      console.log(type, id);

      this.$refs["ApprovalStatusDialog"].show(type, id);
    },
    getTableData(params) {
      let postParams = {
        perPage: this.page.size,
        page: this.page.page,
      };

      if (params) postParams = { ...postParams, ...params };
      postParams = { ...postParams, ...this.searchParams, ...this.sortParams };
      this.tableLoading = true;
      sceneRecordList(postParams).then((res) => {
        let { data, code } = res;

        if (code == 200) {
          this.tableData = data.data;
          this.page.total = data.total;
        }
        this.tableLoading = false;
      });
    },
    searchMethods(params) {
      this.searchParams = {};
      this.page.page = 1;
      if (params.status) {
        let status = [params.status];
        params.status = status;
      }
      this.searchParams = params;
      this.getTableData();
    },
    pageSizeChange(val) {
      this.page.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getTableData();
    },
    tableSortChange(params) {
      if (params.sort_str) {
        this.sortParams = { ...this.sortParams, ...params };
      } else {
        delete this.sortParams.sort_str;
        delete this.sortParams.sort_order;
      }
      this.page.page = 1;
      this.getTableData();
    },
    handleRowClick(params) {
      this.$refs["sceneRecordInfoDialog"].show(params.row.id);
    },
  },
  filters: {},
};
</script>

<style lang="less" scoped>
.templatebox {
  height: 100%;
  .orange {
    color: orange;
  }
  .success {
    color: green;
  }
  .warnning {
    color: red;
  }
}
</style>
